<template>
  <view class="detail-page">
    <!-- 订单状态 -->
    <view class="status-wrap">
      <view class="status">
        <text class="status-text">{{ detail?.statusValue }}</text>
        <text class="status-tip">{{ getStatusTip(detail?.status) }}</text>
      </view>
    </view>

    <!-- 医生信息 -->
    <view class="doctor-card">
      <view class="card-title">医生信息</view>
      <view class="card-body">
        <image
          :src="detail?.docInfo?.avatar || '/static/images/doctor-avatar.png'"
          class="doc-avatar"
        />
        <view class="doc-info">
          <view class="doc-name">
            <text class="name">{{ detail?.docInfo?.name }}</text>
            <text class="title">{{ detail?.docInfo?.positionalTitles }}</text>
          </view>
          <text class="dep"
            >{{ detail?.docInfo?.hospitalName }} {{ detail?.docInfo?.depName }}</text
          >
        </view>
      </view>
    </view>

    <!-- 患者信息 -->
    <view class="patient-card">
      <view class="card-title">患者信息</view>
      <view class="card-body">
        <view class="info-item">
          <text class="label">患者姓名</text>
          <text class="value">{{ detail?.patientInfo?.name }}</text>
        </view>
        <view class="info-item">
          <text class="label">患者性别</text>
          <text class="value">{{ detail?.patientInfo?.gender === 1 ? '男' : '女' }}</text>
        </view>
        <view class="info-item">
          <text class="label">患者年龄</text>
          <text class="value">{{ detail?.patientInfo?.age }}岁</text>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="card-body">
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ detail?.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">问诊类型</text>
          <text class="value">图文问诊</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ detail?.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">应付款</text>
          <text class="value price">￥{{ detail?.pament?.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 病情描述 -->
    <view class="illness-card">
      <view class="card-title">病情描述</view>
      <view class="card-body">
        <text class="illness-desc">{{ detail?.illnessDesc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getConsultDetailAPI } from '@/api/consult'
  import type { ConsultRecord } from '@/types/consult'

  const detail = ref<ConsultRecord>()

  // 获取状态提示文字
  const getStatusTip = (status?: number) => {
    const tipObj: Record<string, string> = {
      '1': '请及时支付，超时订单将取消',
      '2': '请耐心等待医生接诊',
      '3': '医生正在回复中，请耐心等待',
      '4': '问诊已完成，感谢您的信任',
      '5': '订单已取消',
    }
    return tipObj[status?.toString() || ''] || ''
  }

  // 获取问诊详情
  const getDetail = async (id: string) => {
    try {
      const res = await getConsultDetailAPI(id)
      console.log('问诊详情:', res)
      detail.value = res
    } catch (error) {
      console.error('获取问诊详情失败:', error)
      uni.showToast({
        title: '获取问诊详情失败',
        icon: 'none',
      })
    }
  }

  onMounted(() => {
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    const id = (page as any).$page?.options?.id || (page as any).options?.id

    console.log('当前页面:', page)
    console.log('获取到的ID:', id)

    if (id) {
      getDetail(id)
    } else {
      uni.showToast({
        title: '缺少问诊ID',
        icon: 'none',
      })
    }
  })
</script>

<style lang="scss">
  .detail-page {
    padding: 20rpx;
    background-color: #f6f7f9;
    min-height: 100vh;

    .status-wrap {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      margin-bottom: 20rpx;

      .status {
        display: flex;
        flex-direction: column;
        align-items: center;

        .status-text {
          font-size: 36rpx;
          color: #16c2a3;
          margin-bottom: 16rpx;
        }

        .status-tip {
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    .doctor-card,
    .patient-card,
    .order-card,
    .illness-card {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;

      .card-title {
        font-size: 32rpx;
        color: #121826;
        font-weight: bold;
        margin-bottom: 20rpx;
      }

      .card-body {
        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16rpx;
          font-size: 28rpx;

          .label {
            color: #6f6f6f;
          }

          .value {
            color: #121826;

            &.price {
              color: #ff6b35;
            }
          }
        }
      }
    }

    .doctor-card {
      .card-body {
        display: flex;
        align-items: center;

        .doc-avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .doc-info {
          flex: 1;

          .doc-name {
            margin-bottom: 10rpx;

            .name {
              font-size: 32rpx;
              color: #121826;
              margin-right: 20rpx;
            }

            .title {
              font-size: 26rpx;
              color: #6f6f6f;
            }
          }

          .dep {
            font-size: 26rpx;
            color: #6f6f6f;
          }
        }
      }
    }

    .illness-card {
      .illness-desc {
        font-size: 28rpx;
        color: #121826;
        line-height: 1.5;
      }
    }
  }
</style>
